﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		<c:set var="ctx" value="${pageContext.request.contextPath}" />
		<html>

		<head>
			<link rel="stylesheet" href="${ctx}/common/common.css">
			<meta charset="utf-8">
			<title>编辑产品检验项目</title>
			<meta name="renderer" content="webkit">
			<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			<meta name="viewport"
				content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
			<link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
			<link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/modules/layer/default/layer.css"
				media="all">
			<link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
			<script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

			<script src="${ctx}/common/plugins/layuiadmin/layui/lay/modules/layer.js"></script>

			<%-- <script src="${ctx}/common/plugins/publicJs/publicJs.js"></script> --%>
				<style>
					body {
						background: #f2f2f2;
					}

					.page-container {
						padding: 20px 30px 40px;
					}

					.page-header {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						margin-bottom: 16px;
					}

					.form-card,
					.detail-card {
						margin-bottom: 20px;
						background: #fff;
						border-radius: 6px;
					}

					.form-section .layui-form-item {
						margin-bottom: 0;
					}

					.required {
						color: #f56c6c;
						margin-right: 4px;
					}

					.detail-card .detail-row {
						background: #fff;
						border: 1px solid #e6e6e6;
						border-radius: 6px;
						padding: 16px 20px;
						margin-bottom: 12px;
					}

					.detail-field {
						display: flex;
						align-items: center;
						gap: 10px;
					}

					.detail-field .detail-field-label {
						color: #666;
						min-width: 80px;
					}

					.detail-field .layui-input {
						flex: 1;
					}

					.detail-field .delDiv {
						cursor: pointer;
						width: 22px;
						height: 22px;
					}

					.range-field .inline-input {
						width: 80px;
					}

					.range-field .unit-input {
						width: 70px;
					}

					.detail-field span.separator {
						color: #666;
					}

					.detail-textarea textarea {
						flex: 1;
						min-height: 60px;
						resize: vertical;
					}

					.detail-actions,
					.footer-actions {
						display: flex;
						justify-content: center;
						margin: 24px 0 0;
					}

					.footer-actions {
						margin-bottom: 24px;
					}

					.empty-tip {
						text-align: center;
						color: #999;
						padding: 12px 0;
					}
				</style>
		</head>

		<body>
			<!--主体内容层-->
			<form class="layui-form layui-col-md12" action="${ctx}/inspStandard/inspStandardSave">
				<div class="layui-fluid page-container">
					<div class="page-header">
						<button type="button" id="rollback" class="layui-btn layui-btn-primary">返回</button>
					</div>
					<div class="form-card">
						<div class="layui-card-body">
							<div class="layui-row layui-col-space20 form-section">
								<div class="layui-col-md6">
									<div class="layui-form-item">
										<label class="layui-form-label"><span class="required">*</span>产品名称</label>
										<div class="layui-input-block">
											<input type="hidden" id="sourceId" name="sourceId" lay-verify="sourceId"
												value="${source.id }">
											<input type="hidden" id="type" name="type" value="${source.pType }">
											<input type="hidden" id="delIds" name="delIds">
											<input type="text" id="sourceName" name="sourceName"
												value="${source.sourceName }" required lay-verify="required"
												readonly="readonly" placeholder="产品名称" autocomplete="off"
												class="layui-input">
											<c:if test="${source.id == null }">
												<a id="selectSource" class="layui-btn layui-btn-primary">选择</a>
											</c:if>
										</div>
									</div>
								</div>
								<div class="layui-col-md6">
									<div class="layui-form-item">
										<label class="layui-form-label">产品规格</label>
										<div class="layui-input-block">
											<input type="text" id="specifications" name="specifications"
												value="${source.specifications }" readonly="readonly" placeholder="产品规格"
												autocomplete="off" class="layui-input">
										</div>
									</div>
								</div>
							</div>
							<div class="layui-row layui-col-space20 form-section">
								<div class="layui-col-md6">
									<div class="layui-form-item">
										<label class="layui-form-label">单位</label>
										<div class="layui-input-block">
											<input type="text" id="sourceUnit" name="sourceUnit" readonly="readonly"
												value="${source.unit }" placeholder="单位" autocomplete="off"
												class="layui-input">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="detail-card">
						<div class="layui-card-header">检验项目</div>
						<div class="layui-card-body" id="addCard">
							<c:if test="${empty source.inspectList }">
								<div class="empty-tip">请添加检验项目</div>
							</c:if>
							<c:forEach items="${source.inspectList }" var="inspect">
								<div class="detail-row">
									<div class="layui-row layui-col-space20">
										<div class="layui-col-md3 layui-col-sm12">
											<div class="detail-field">
												<input type="hidden" name="standardEntId" value="${inspect.id }">
												<img class="delDiv" src="${ctx}/common/plugins/images/u.png" alt="删除">
												<span class="detail-field-label">检验项目：</span>
												<input type="text" name="name" value="${inspect.name }" required
													lay-verify="required" placeholder="检验项目" autocomplete="off"
													class="layui-input">
											</div>
										</div>
										<div class="layui-col-md3 layui-col-sm12">
											<div class="detail-field range-field">
												<span class="detail-field-label">标准值：</span>
												<input name="min_value" value="${inspect.minValue }"
													class="layui-input inline-input" lay-verify="number" type="text"
													placeholder="最小值">
												<span class="separator">-</span>
												<input name="max_value" value="${inspect.maxValue }"
													class="layui-input inline-input" lay-verify="number" type="text"
													placeholder="最大值">
												<input name="unit" value="${inspect.unit }"
													class="layui-input unit-input" type="text" placeholder="单位" />
											</div>
										</div>
										<div class="layui-col-md3 layui-col-sm12">
											<div class="detail-field detail-textarea">
												<span class="detail-field-label" style="margin-top:-20px;">检测步骤：</span>
												<textarea name="insp_step" class="layui-textarea"
													placeholder="请输入检测步骤">${inspect.inspStep }</textarea>
											</div>
										</div>
										<div class="layui-col-md3 layui-col-sm12">
											<div class="detail-field">
												<span class="detail-field-label">依据来源：</span>
												<input type="text" name="source" value="${inspect.source }"
													placeholder="依据来源" autocomplete="off" class="layui-input">
											</div>
										</div>
									</div>
								</div>
							</c:forEach>
						</div>
						<div class="detail-actions">
							<button type="button" class="layui-btn" id="addStandard">+手动添加检验项目</button>
						</div>
					</div>
					<div class="footer-actions">
						<button class="layui-btn" id="formBtn" lay-submit lay-filter="formDemo"
							style="padding: 0 60px;">提交</button>
					</div>
				</div>
			</form>

			<script type="text/javascript">
				layui.use(['jquery', 'layer'], function () {
					var $ = layui.$ //重点处
						, layer = layui.layer;

					if ($("#selectSource").length > 0) {
						document.getElementById("selectSource").addEventListener("click", function () {
							layer.open({
								type: 2,
								skin: 'layui-layer-rim', //加上边框
								area: ['80%', '70%'],
								content: '${ctx}/inspStandard/selectSource'
							});
							form.render();
						});
					}

					document.getElementById("addStandard").addEventListener("click", function () {
						var str = '';
						str += '<div class="detail-row">';
						str += '  <div class="layui-row layui-col-space20">';
						str += '    <div class="layui-col-md4 layui-col-sm12">';
						str += '      <div class="detail-field">';
						str += '        <input type="hidden" name="standardEntId" value="newId">';
						str += '        <img class="delDiv" src="${ctx}/common/plugins/images/u.png" alt="删除">';
						str += '        <span class="detail-field-label">检验项目：</span>';
						str += '        <input type="text" name="name" required lay-verify="required" placeholder="检验项目" autocomplete="off" class="layui-input">';
						str += '      </div>';
						str += '    </div>';
						str += '    <div class="layui-col-md4 layui-col-sm12">';
						str += '      <div class="detail-field range-field">';
						str += '        <span class="detail-field-label">标准值：</span>';
						str += '        <input name="min_value" class="layui-input inline-input" lay-verify="number" type="text" placeholder="最小值">';
						str += '        <span class="separator">-</span>';
						str += '        <input name="max_value" class="layui-input inline-input" lay-verify="number" type="text" placeholder="最大值">';
						str += '        <input name="unit" class="layui-input unit-input" type="text" placeholder="单位" />';
						str += '      </div>';
						str += '    </div>';
						str += '    <div class="layui-col-md4 layui-col-sm12">';
						str += '      <div class="detail-field detail-textarea">';
						str += '        <span class="detail-field-label" style="margin-top:-20px;">检测步骤：</span>';
						str += '        <textarea name="insp_step" class="layui-textarea" placeholder="请输入检测步骤"></textarea>';
						str += '      </div>';
						str += '    </div>';
						str += '  </div>';
						str += '  <div class="layui-row layui-col-space20">';
						str += '    <div class="layui-col-md6 layui-col-sm12">';
						str += '      <div class="detail-field">';
						str += '        <span class="detail-field-label">依据来源：</span>';
						str += '        <input type="text" name="source" placeholder="依据来源" autocomplete="off" class="layui-input">';
						str += '      </div>';
						str += '    </div>';
						str += '  </div>';
						str += '</div>';
						$('#addCard .empty-tip').remove();
						$('#addCard').append(str);
					});

					var delIds = '';
					$(document).on("click", ".delDiv", function () {
						var delId = $(this).prevAll("input[name='standardEntId']").first().val();
						if (delId != null && delId != 'undefined' && delId != 'newId') {
							delIds += delId + ",";
						}
						$(this).closest('.detail-row').remove();
						if ($('#addCard .detail-row').length === 0) {
							$('#addCard').append('<div class="empty-tip">请添加检验项目</div>');
						}
						$('#delIds').val(delIds);
					});
				});

				layui.use('form', function () {
					var form = layui.form;
					/* 监听提交 */
					form.on('submit(formDemo)', function (data) {
						var Obtn = document.getElementsByClassName("delDiv")
						if (Obtn.length == 0) {
							alert("请添加检验项目");
							return false;
						}
						layer.load(1, {
							shade: [0.1, '#fff'] //0.1透明度的白色背景
						});
						$("#formBtn").attr("disabled", true);
					});
				})
				document.getElementById("rollback").addEventListener("click", function () {
					window.history.back();
				})
			</script>
		</body>

		</html>